<!-- 散点图 -->
<template>
	<div class="scatter">
		<nav class="scatter_nav">
			<ul>
				<li @click="navTab(li,index)" :class="{cur:li.isCur}" v-for="(li,index) of scatterNav">{{li.name}}</li>
			</ul>
			<!-- <router-link tag='i' class="ion ion-help-circled" to="/getTeamLevelExplain"></router-link> -->

		</nav>
		<div class="two team_two" v-show="isCountryShow">
			<p>您的团队在全国 <span class="fc_highlight">{{teamTotal || 0}}</span> 个团队中所在的位置为：</p>
			<!-- <div class="buttonWrap">
				<span @click="blowUp">放大</span><span @click="shrink">缩小</span><span @click="reset">重置</span>
			</div> -->
			<!-- <p class="ft12 mt10 fc_green">{{remarkinfo}}</p> -->
			<div style="width:100%;height:35rem;overflow:auto;">
				<div ref="avgValue" style="width:300%;height:34.2rem"></div>
			</div>
		</div>
		<div class="two team_two" v-show="isTeamShow">
			<p>您的团队在{{optionname}} <span class="fc_highlight">{{personalCount || 0}}</span> 个团队中所在的位置为：</p>
			<!-- <p class="ft12 mt10 fc_green">{{remarkinfo}}</p> -->
			<div ref="avgTeamScatter" style="width:100%;height:34.2rem"></div>
			<span class="optionname">{{optionname}}</span>
		</div>
	</div>
</template>
<script type="text/javascript">
	import echarts from 'echarts'
	import echartsOptions from '../../assets/js/performace/echartOption'
	import getInterface from '../../assets/js/insterface'
	// import teamInterfaceUrl from '../../assets/js/performace/url'
	export default{
		/*props:['remarkinfo'],*/
		data(){
			return{
				'scatterNav':[
					{
						name:'全国',
						isCur:true,
					},
					{
						name:'团队',
						isCur:false,
					}

				],
				'isCountryShow':true,
				'isTeamShow':false,

				'teamTotal':'',
				'personalCount':'',
				'optionname':''
			}
		},
		mixins:[echartsOptions],
		mounted(){
			setTimeout(()=>{
				this.getCountryScatter();
			},10)
		},
		methods:{
			blowUp(){
				var width = Number(this.$refs.avgValue.style.width.split('%')[0]);
				var height = Number(this.$refs.avgValue.style.height.split('rem')[0]);
				var avgEcharts;
				if(width < 400){					
					this.$refs.avgValue.style.width = width*1.5+'%';
					this.$refs.avgValue.style.height = height*1.15+'rem';
					avgEcharts = echarts.init(this.$refs.avgValue);
					avgEcharts.setOption(this.avgOption);
				}				
			},
			shrink(){
			    var width = Number(this.$refs.avgValue.style.width.split('%')[0]);
				var height = Number(this.$refs.avgValue.style.height.split('rem')[0]);
				var avgEcharts;				
				if(width > 100){
				    console.log('大');					    		
					this.$refs.avgValue.style.width = width*0.7+'%';
					this.$refs.avgValue.style.height = height*0.9+'rem';
					if(Number(this.$refs.avgValue.style.width.split('%')[0])<100){
						this.$refs.avgValue.style.width = '100%';
						this.$refs.avgValue.style.height = '34.2rem';
					}
					avgEcharts = echarts.init(this.$refs.avgValue);	
					avgEcharts.setOption(this.avgOption);
				}
			},
			reset(){
				var avgEcharts;	
				var width = Number(this.$refs.avgValue.style.width.split('%')[0]);
				if(width!==100){
					this.$refs.avgValue.style.width = '100%';
					this.$refs.avgValue.style.height = '34.2rem';
					avgEcharts = echarts.init(this.$refs.avgValue);	
					avgEcharts.setOption(this.avgOption);
				}              
			},
			navTab(li,index){
				for(let i=0;i<this.scatterNav.length;i++){
					this.scatterNav[i].isCur = false;
				}
				li.isCur = true;
				let vue = this;

				switch(index){
					case 0:
						this.isCountryShow = true;
						this.isTeamShow = false;
						setTimeout(function(){
							vue.getCountryScatter();
						},10)
						break;
					case 1:
						this.isCountryShow = false;
						this.isTeamShow = true;
						setTimeout(function(){
							vue.getTeamSactter();
						},10)
						break;
				}
			},
			getCountryScatter(){
				let countryChartUrl = getInterface.getTeamChartUrl + this.$route.query.empNo + '/country';
				let avgEcharts = echarts.init(this.$refs.avgValue);
				this.$http.get(countryChartUrl,{emulateJSON:true})
				.then((response) =>{
					// console.log(response);
					if(response){
						let resDatasLen = response.data.data.length;
						this.teamTotal = resDatasLen;

						let types =response.data.name;
						let resDatas = response.data.data;
						// var types = ['FW&S','INDIRECT','INDU','RKA','GME'];
						// var data = [[0,5],[1,1],[2,3],[2,3],[3,4],[4,4]];
						let datas = [];
						let value=[];
						let minData = 0;
						resDatas.map(function(eve,index){
							minData = index && (minData < eve.value) ? minData : eve.value;
							// if(index == resDatas.length-1){
							// 	minData = eve.value;
							// }
							let firstType = '';
							let starIndex = 0;
                            if(eve.star){
                                firstType = types[0];
                                starIndex = types.indexOf(eve.name);
                            	types[0] = eve.name;
                            	types[starIndex] = firstType;
                            }
						});
						resDatas.map(function(eve){						
                            value = [types.indexOf(eve.name)*20+10,eve.value,eve.star,eve.name1];
                            datas.push(value);
                            
						});

						// for(let value of resDatas){
						// 	let name = value.name;
						// 	switch(name){
						// 		case 'FW&S':
						// 			value = [types.indexOf("FW&S")*10+5,value.value,value.star,value.name1];
						// 			break;
						// 		case 'INDIRECT':
						// 			value = [types.indexOf("INDIRECT")*10+5,value.value,value.star,value.name1];
						// 			break;
						// 		case 'INDU':value = [types.indexOf("INDU")*10+5,value.value,value.star,value.name1];
						// 			break;
						// 		case 'RKA':value = [types.indexOf("RKA")*10+5,value.value,value.star,value.name1];
						// 			break;
						// 		case 'GME':value = [types.indexOf("GME")*10+5,value.value,value.star,value.name1];
						// 			break;
						// 		case 'HSSE':value = [types.indexOf("HSSE")*10+5,value.value,value.star,value.name1];
						// 		break;
						// 	}
						// 	// if(value[2]){
						// 	// 	this.avgOption.series[0].markPoint.data[0].coord = [value[0],value[1]];
						// 	// }
						// 	datas.push(value);
						// }
						this.avgOption.tooltip.formatter = function(params){
							return params.value[3] + ' : ' + params.value[1];
						};
						// this.avgOption.series[0].markPoint.formatter = function(params){
						// 	return types[params.value[0]] + '\n' + params.value[1];
						// };
						types.map(function(eve1,eve2){							
							types.splice(eve2*20+0,0,'','','','','','','','','','');
							types.splice(eve2*20+11,0,'','','','','','','','','');
						});
						this.avgOption.xAxis.splitLine.interval=function(index,value){
						    return index%20===0 ? true : false;
						}
						this.avgOption.xAxis.axisTick.interval=function(index,value){
							return index%20===0 ? true : false;
						}
						for (var i=0;i<datas.length;i++){
							datas[i][0]=datas[i][0]-10+2+Math.random()*16;
							if(datas[i][2]){
								this.avgOption.series[0].markPoint.data[0].coord = [datas[i][0],datas[i][1]];
								// this.avgOption.series[0].markPoint.label.normal.formatter='得分'+datas[i][1];
								// this.avgOption.series[0].markPoint.label.normal.position=['insideTopRight']
							}
						}
						this.avgOption.xAxis.data = types;
						this.avgOption.series[0].data = datas;
						if(minData > 10){
							this.avgOption.yAxis.min = minData - 10;
						}else{
							this.avgOption.yAxis.min = 0;
						}
						avgEcharts.setOption(this.avgOption);
						setTimeout(()=>{
							this.$refs.avgValue.style.height = "34.2rem";
						},10)
					}
				})
			},
			getTeamSactter(){
				let teamChartUrl = getInterface.getTeamChartUrl + this.$route.query.empNo + '/team';
				let avgTeamScatter = echarts.init(this.$refs.avgTeamScatter);
				this.$http.get(teamChartUrl,{emulateJSON:true})
				.then((response)=>{
					// console.log(response);
					let resDatasLen = response.data.data.length;
					if(resDatasLen > 0){
						this.personalCount = resDatasLen;

						let types = response.data.name;
						let resDatas = response.data.data;

						let datas = [];

						for(var j=0; j<resDatas.length; j++){
							var value = [j,resDatas[j].value,resDatas[j].star,resDatas[j].name1]
							if(value[2]){
								this.avgTeamOption.series[0].markPoint.data[0].coord = [value[0],value[1]];
							}

							datas.push(value);
						}
						this.optionname = response.data.name[0];

						// for(let value of resDatas){
						// 	debugger;
						// 	value = [0,value.value,value.star]

						// 	if(value[2]){
						// 		this.avgTeamOption.series[0].markPoint.data[0].coord = [value[0],value[1]];
						// 	}
						// 	// console.log(value)

						// 	datas.push(value);

						// }

						var nameList = [];

						this.avgTeamOption.tooltip.formatter = function(params){
							return params.value[3] + ' : ' + params.value[1];
						};

						//处理有多少条数据，就有多少个名字

						for(var i=0; i<resDatas.length; i++){
							nameList.push(types[0]);
						}
						// debugger;
						this.avgTeamOption.xAxis.data = nameList;
						this.avgTeamOption.series[0].data = datas;

						avgTeamScatter.setOption(this.avgTeamOption);
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.buttonWrap{
		float:right;
		    margin-top: 1rem;
		span{
			display: inline-block;
		    border: solid 1px #8ac6ef;
		    padding: 2px 5px;
		    border-radius: 4px;
		    background-color: rgba(250,250,250,0.5);
		    margin-right: 0.3rem;
		    &:active{
		    	background-color: rgba(240,240,240,1);
		    }
		}		
	}
</style>